<template>
    <div class="w-full">
        <a-divider />
        <a-space class="flex justify-around items-center mb-5">
            <template v-for="item in positionList" :key="item.key">
                <a-tooltip placement="top">
                    <template #title>
                        <span>{{ item.label }}</span>
                    </template>
                        <a-button class="flex-1" size="default" @click="handleClick(item.key)">
                            <component :is="item.icon" />
                        </a-button>
                    </a-tooltip>
            </template>
        </a-space>
        <setting-item-box name="位置">
            <a-input-number style="width:100%" v-model:value="chartAttr.x" :min="0" prefix="上:"/>
            <a-input-number style="width:100%" v-model:value="chartAttr.y" :min="0" prefix="左:"/>
        </setting-item-box>
    </div>
</template>

<script setup lang="ts">
import {renderIcon} from '@/utils/index.ts'
import settingItemBox from '../settingItemBox/index.vue'
import type { Component } from 'vue'
import type { EditCanvasConfigType } from '@/stores/types';

withDefaults(defineProps<{
    canvasConfig:EditCanvasConfigType,
    chartAttr:any
}>(),{})

type PosType = {
    key:string
    icon:Component
    label:string
}
const positionList:PosType[] = [
    {
        key:'AlignHorizontalLeftIcon',
        label:'居左',
        icon:renderIcon('fluent:align-left-16-regular')
    },
    {
        key:'AlignVerticalCenterIcon',
        label:'居中',
        icon:renderIcon('streamline-ultimate:align-middle')
    },
    {
        key:'AlignHorizontalRightIcon',
        label:'居中',
        icon:renderIcon('solar:align-right-linear')
    },
    {
        key:'AlignVerticalTopIcon',
        label:'顶部',
        icon:renderIcon('solar:align-top-linear')
    },
    {
        key:'AlignHorizontalCenterIcon',
        label:'Y轴居中',
        icon:renderIcon('streamline-ultimate:align-center')
    },
    {
        key:'AlignVerticalBottomIcon',
        label:'底部',
        icon:renderIcon('proicons:align-bottom')
    }
]

const handleClick = (key:string) => {
    switch(key){
        case 'AlignHorizontalLeftIcon':
            break;
        case 'AlignVerticalCenterIcon':
            break;
        case 'AlignHorizontalRightIcon':
            break;
        case 'AlignVerticalTopIcon':
            break;
        case 'AlignHorizontalCenterIcon':
            break;
        case 'AlignVerticalBottomIcon':
            break;
    }
}
</script>

<style lang='scss' scoped></style>